<template>
  <div class="box">
    <a class="game-item" target="_blank" :href="`${isLocal?'../../abin-web/public':'.'}/games/snake.html`">
      <img src="@/assets/games/logo-snake.png" alt="" class="game-logo">
      <div class="game-info">
        <div class="game-title">贪吃蛇</div>
        <div class="game-desc">好玩的贪吃蛇</div>
      </div>
    </a>
    <a class="game-item" target="_blank" :href="`${isLocal?'../../abin-web/public':'.'}/games/five-chess.html`">
      <img src="@/assets/games/logo-five-chess.png" alt="" class="game-logo">
      <div class="game-info">
        <div class="game-title">五子棋</div>
        <div class="game-desc">让我来看看你的棋艺！</div>
      </div>
    </a>
    <a class="game-item" target="_blank" :href="`${isLocal?'../../abin-web/public':'.'}/games/fly-bird/index.html`">
      <img src="@/assets/games/logo-fly-bird.png" alt="" class="game-logo">
      <div class="game-info">
        <div class="game-title">飞翔的小鸟</div>
        <div class="game-desc">小鸟很愤怒，后果很严重～</div>
      </div>
    </a>
    <a class="game-item" target="_blank" href="https://edition.cnn.com/interactive/2021/03/cnnix-steership/">
      <img src="https://edition.cnn.com/favicon.ico" alt="" class="game-logo">
      <div class="game-info">
        <div class="game-title">走出大运河</div>
        <div class="game-desc">上帝视角操作轮船走出大运河！</div>
      </div>
    </a>
    <a class="game-item" target="_blank" href="https://www.yikm.net/">
      <img src="https://img1.baidu.com/it/u=2482939586,277649298&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="" class="game-logo">
      <div class="game-info">
        <div class="game-title">小霸王游戏厅</div>
        <div class="game-desc">小霸王，其乐无穷 。红白机，FC在线游戏，街机游戏，街机在线，NES games，NES games online，Super Mario</div>
      </div>
    </a>
    <a class="game-item" target="_blank" href="http://www.itmind.net/xbw/">
      <img src="@/assets/games/logo-300game.png" alt="" class="game-logo">
      <div class="game-info">
        <div class="game-title">300游戏光碟</div>
        <div class="game-desc">童年的味道～啊，真香</div>
      </div>
    </a>
    <a class="game-item" target="_blank" href="https://2020game.io/">
      <img src="@/assets/icons/11.png" alt="" class="game-logo">
      <div class="game-info">
        <div class="game-title">2000游戏</div>
        <div class="game-desc">重点推荐，闯关类游戏！</div>
      </div>
    </a>
    <a class="game-item" target="_blank" href="https://yzyx.info/">
      <img src="https://yzyx.info/images/favicon.png" alt="" class="game-logo">
      <div class="game-info">
        <div class="game-title">益智游戏</div>
        <div class="game-desc">魔性解压网站，急速晃动还会闪亮你的眼</div>
      </div>
    </a>
    <a class="game-item" target="_blank" rel="nofollow external" href="http://www.bz.bhrgz.cn/">
      <img src="http://www.bz.bhrgz.cn/images/logo.png" alt="" class="game-logo">
      <div class="game-info">
        <div class="game-title">西瓜游戏平台</div>
        <div class="game-desc">收集了很多小游戏</div>
      </div>
    </a>
    <a class="game-item" target="_blank" href="http://www.itmind.net/tetris/">
      <img src="@/assets/icons/12.png" alt="" class="game-logo">
      <div class="game-info">
        <div class="game-title">俄罗斯方块</div>
        <div class="game-desc">经典俄罗斯方块网页版</div>
      </div>
    </a>
    <a class="game-item" target="_blank" href="https://lines.frvr.com/">
      <img src="@/assets/icons/13.png" alt="" class="game-logo">
      <div class="game-info">
        <div class="game-title">连线游戏</div>
        <div class="game-desc">一款轻松的益智在线小游戏，游戏主要的玩法就是让相同颜色两点之间连上线段，并且还要保证要经过游戏界面中的每一个小白点，玩家根据图中的画线方式连接即可轻松过关。</div>
      </div>
    </a>
    <a class="game-item" target="_blank" href="http://www.heyzxz.me/pcol/">
      <img src="@/assets/icons/14.png" alt="" class="game-logo">
      <div class="game-info">
        <div class="game-title">沉浸式3D台球</div>
        <div class="game-desc">在线台球游戏，画质很精美</div>
      </div>
    </a>
    <a class="game-item" target="_blank" href="https://beta.deeeep.io/?host=BPIx93">
      <img src="https://beta.deeeep.io/favicon-32x32.png" alt="" class="game-logo">
      <div class="game-info">
        <div class="game-title">深海鱼求生</div>
        <div class="game-desc">你是一条鱼，能活多久？</div>
      </div>
    </a>
    
  </div>
</template>

<script setup>
const isLocal = location.hostname === 'localhost'
</script>

<style lang="scss" scoped>
.game-item {
  width: 224px;
  height: 95px;
  padding: 10px;
  margin: 12px 0 0 12px;
  border: 1px solid #e4ecf3;
  box-shadow: 1px 2px 3px #f2f6f8;
  border-radius: 6px;
  background: #fff;
  overflow: hidden;
  transition: all .3s;
  display: flex;
  align-items: center;
  cursor: pointer;
  &:hover{
    background: #f2f8fd;
    .game-title{
      color: #ee521c !important;
    }
  }

  .game-logo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    overflow: hidden;
    margin-right: 10px;
  }

  .game-info {
    flex: 1;

    .game-title {
      font-size: 14px;
      font-weight: 700;
      color: #3273dc;
      text-overflow: ellipsis;
      white-space: nowrap;
      padding: 0 0.1rem;
    }

    .game-desc {
      color: gray;
      font-size: 12px;
      height: 30px;
      word-break: break-all;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      margin-top: 5px;
    }
  }
}
@media (max-width: 480px) {
  .box{
    padding: 8px;
    justify-content: center;
    .game-item{
      width: 100%;
      margin: 5px 0;
    }
  }
}
</style>